import { defineStore } from "pinia";
import { computed } from "vue";
//第一个参数是应用程序中 store 的唯一 id :carStore
//需要注意的是，defineStore返回的是一个回调方法
//option store
export const useCarStore = defineStore("carStore", {
  state: () => ({
    carName: "奥迪",
    carColor: "黑色",
    fixnum:0
  }),
  getters: {
    // getters相当于computed计算属性。用于获取state中的数据
    //this指向store实例 方式一
    // getCarName() {
    //   return `gettees里面的get方法:${this.carName}`
    // },
    //方式二通过传入state参数
    getCarName(state) {
      console.log(`output->state`, state);
      return `gettees里面的get方法:${state.carName}`;
    },
    getCarColor() {
      return `这里是获取的车辆颜色:${this.carColor}`;
 
    },
  },
  actions: {
    //actions相当于methods方法。用于修改state中的数据
    setCarName(val) {
      this.carName = val;
    },
    setCarColor(color) {
        this.fixnum++;
      localStorage.setItem("carColor", color);
      return (this.carColor = color);
    },
    restData() {
      //在actions中调用其他store
  
      const otherStore = useCarStoreSetup();
      otherStore.addCarType();
      this.$reset();
    },
  },
    // 开启数据持久化
    persist:true,
   /*  persist: {
      // 修改存储中使用的键名称，默认为当前 Store的 id
      key: 'storekey',
      // 修改为 sessionStorage，默认为 localStorage
      storage: window.sessionStorage,
      // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    
    },
 */
});
//二、用setup方式定义store
export const useCarStoreSetup = defineStore("carStore4type", () => {
  let carType = ref("轿车");
  //相当于getters，需要借助computed
  const getCarType = computed(() => {
    return carType.value;
  });
  const addCarType = () => {
    carType.value += "和SUV";
  };
  //返回需要暴露的数据和方法
  return {
    carType,
    getCarType,
    addCarType,
  };
});
